<template>
    <el-row class="user-info-form" type="flex" justify="center">
        <el-col>
            <el-form label-position="top" :model="editForm" :rules="editFormRules" ref="editForm" @submit.native.prevent>
                <input type="hidden"  v-model="editForm.id">
                <el-form-item label="业主单位：" prop="organizationId">
                    <el-select filterable  @change="bindServerId()" v-model="editForm.organizationId" >
                      <el-option
                        v-for="item in orgOptions"
                        :key="item.organizationId"
                        :label="item.shortName"
                        :value="item.organizationId">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务标识：" prop="serverId">
                    <el-select filterable v-model="editForm.serverId" >
                      <el-option
                        v-for="item in serverIdOptions"
                        :key="item.serverId"
                        :label="item.name"
                        :value="item.serverId">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="配置文件：" prop="configPath">
                    <el-input v-model="editForm.configPath" clearable></el-input>
                </el-form-item>
                <el-form-item label="服务端zk路径：" prop="lineControl">
                    <el-input v-model="editForm.lineControl" clearable></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input v-model="editForm.remarks" clearable></el-input>
                </el-form-item>
                <el-form-item label-width="0" class="verifyidentity-button">
                    <el-button @click="closeDialog()">取消</el-button>
                    <el-button type="primary" @click="saveEdit('editForm')">确定</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>
<script>

import { getOrgList } from '@/api/org'
import { updateUsage,getList} from '@/api/dcx'

export default {
    mame: 'PlatTransDeviceForm_list',
    props: {
        editInfo: {
            type: Object,
            required: false
        },
        updateId: {
            type: Number,
            required: false
        },
        closeDialog: {
            type: Function,
            required: true
        },
    },
    data() {
        return {
            editForm: {
                id: 0,
                updateId: '',
                organizationId: '',
                serverId:'',
                lineControl: '',
                configPath:'',
                remarks:'',
            },
            orgOptions: [],
            serverIdOptions: [],
            editFormRules: {
                lineControl: [
                    { required: true, message: '请输入服务端zk路径', trigger: 'blur' },
                ],
                configPath: [
                    { required: true, message: '请输入配置文件', trigger: 'blur' },
                ],
                serverId: [
                    { required: true, message: '请选择服务标识', trigger: 'change' },
                ],
                organizationId: [
                  { required: true, message: '请选择业主单位', trigger: 'change' }
                ],
            },
        }
    },
    created() {
        let infoObj = this.editInfo
        this.editForm.updateId = this.updateId
        if(infoObj.id) {//编辑
          this.editForm.organizationId = infoObj.organizationId
          this.editForm.id = infoObj.id
          this.editForm.serverId = infoObj.serverId
          this.editForm.lineControl = infoObj.lineControl
          this.editForm.configPath = infoObj.configPath
          this.editForm.remarks = infoObj.remarks
        }
        getOrgList({queryType: 0}).then((data)=>{
          this.orgOptions.push.apply(this.orgOptions,data.data);
          this.bindServerId(infoObj.id?infoObj.serverId:'')
        })
    },
    methods: {
        bindServerId(selectedId){
            getList({
                organizationId: this.editForm.organizationId,
                queryType: 0,
                pageIndex: 0,
                pageSize: 100
            }).then((data)=>{
              this.serverIdOptions = data.data
              this.editForm.serverId =selectedId || (data.data.length>0?data.data[0].serverId:'')
            })
        },
        saveEdit(formName) {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    let parames = that.editForm
                    updateUsage(parames).then(res => {
                        if( res.status === 200) {
                          that.$message({
                            type: 'success',
                            message: '操作成功!'
                          })
                          that.closeDialog(true)
                        }else{
                          that.$message.error(res.info)
                        }
                    });
                } else {
                    return false
                }
            });
        },
    }
}
</script>
